<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/address_list.css">
	<link rel="icon" href="./icon/title_vagetable.png">
	<title>收货地址页面</title>
	<script src="./js/axios.min.js"></script>
	<script src="./js/axios.config.js"></script>
</head>

<body>
	<header>
		<img class="arrow" src="./img/shippingAddress/back.png" onclick="window.history.back(-1)" alt="">
		<span class="name">收货地址</span>
	</header>
	<ul class="list">

	</ul>
	<div class="footer">
		<div class="button"><a href="./address_add.html">新建收货地址</a></div>
	</div>
	<script>
		// 获取元素
		let oUl = document.querySelector('.list')
		// 获取收货地址列表
		axios.get('/address/list')
			.then((res) => {
				if (res.status) {
					res.data.forEach(item => {
						let address = `
							<li>
								<div class="info">
									<div class="name">${item.name}</div>
									<div class="photonumber">${item.tel}</div>
									<div class="mark" style="display: ${item.isDefault ? 'bolck' : 'none'}">默认</div>
								</div>
								<div class="address">
									${item.province_name}${item.city_name}${item.county_name}${item.town_name}${item.street}
								</div>
								<div class="op">
									<img src="./img/shippingAddress/icon4.png" alt="">
									<img class='remove' data-id='${item.id}' src="./img/shippingAddress/icon5.png" alt="">
								</div>
							</li>
						`
						// 插入DOM
						oUl.insertAdjacentHTML('beforeend', address)
					});

				}
			})
		// 删除事件——事件委托
		oUl.addEventListener('click', function (e) {
			// 匹配删除图标
			let isValid = e.target.matches('.remove')
			if (isValid) {
				// 获取收货地址id
				let id = e.target.dataset.id
				// 发送Ajax，删除收货地址
				axios.post('/address/remove', { id: id })
					.then(function (res) {
						// 删除DOM元素
						if (res.status) {
							e.target.cloest('li').remove()
						}
						else {
							// 删除失败
							alert(res.msg)
						}
					})

			}
		})
	</script>
</body>

</html>